<template>
    <div class="review">
        <!-- 评论字样 -->
        <div><img src="@/assets/images/review_icon.png" height="24">评论</div><br>
        <!-- 输入评论区 -->
        <form class="upViews" method="post" action="/">
            <!-- 用户信息 -->
            <div class="topNav">
                <input type="text" name="user" placeholder="昵称" v-model="views.user">
                <input type="email" name="email" placeholder="邮箱" v-model="views.email">
            </div>
            <!-- 评论内容 -->
            <b-form-textarea
                id="textarea-rows"
                class="b-form-textarea"
                placeholder="请输入内容..."
                rows="8"
                v-model="views.message"
                no-resize
            ></b-form-textarea>
            <!-- 提交按钮 -->
            <b-button  variant="primary" @click="addViews()" >添加评论</b-button>
        </form>
        <!-- 评论列表显示 -->
        <ul>
            <li v-for="(item, index) in reviews" :key="index">
                <!-- 评论者信息及回复按钮 -->
                <div class="MesNav">
                    <div class="vinfo">
                        <img v-if="index%3 == 0" src="http://img.sharpfactory.top/dd.png" height="45">
                        <img v-if="index%3 == 1" src="http://img.sharpfactory.top/958140350aa0c971195f4668306116f0.jpg" height="45">
                        <img v-if="index%3 == 2" src="http://img.sharpfactory.top/bb77212234ce91e80dec0e52421b7327.jpeg" height="45">
                        <div>
                            <span>{{item.user}}</span><br>
                            <span>{{item.createdYear}}-{{item.createdMonth}}-{{item.createdDay}}</span>
                        </div>
                    </div>
                </div>
                <!-- 评论内容 -->
                <div class="content">{{item.message}}</div>
            </li>
        </ul>
    </div>
</template>
<script>
import Axios from 'axios';
import { createdForum, getForum } from '@/../api/api.js';
export default {
    props: {
        // 文章ID
        articleId: {
            type: Number,
            default: null
        }
    },
    data () {
        return {
            // 模拟评论数据
            reviews: [],
          // 模拟添加评论数据
            views: {
                user:"",
                email:"",
                message:""
            }
        };
    },
    created(){
        Axios.get(getForum,{
            params: {
                article_id:this.articleId
            }
        })
        .then(Response => {
            if (Response.data.message == 'success') {
                this.reviews = Response.data.data.forum;
            }
        })
        .catch(err => {
            console.log(err);
        });
    },
    methods: {
        addViews() {
            if(/^[\u4E00-\u9FA5A-Za-z0-9_,.?!，。？！…-]+$/.test(this.views.message) && /^[\u4E00-\u9FA5A-Za-z]+$/.test(this.views.user) && (/^[1-9]{4,16}@qq.com/.test(this.views.email) || /^[0-9a-z]{0,255}@163.com/i.test(this.views.email))) {
                Axios.post(createdForum,{
                    article_id: this.articleId,
                    user: this.views.user,
                    email: this.views.email,
                    message: this.views.message
                })
                .then(Response => {
                    if (Response.data.message == 'success') {
                        this.reviews.unshift({
                            user: this.views.user,
                            message: this.views.message,
                            createdYear: new Date().getFullYear(),
                            createdMonth: new Date().getMonth()+1,
                            createdDay: new Date().getDay()+1
                        });
                        this.views = {
                            user:"",
                            email:"",
                            message:""
                        };
                    }
                })
                .catch(err => {
                    console.log(err);
                });
            } else {
                window.alert('请检查你的留言格式是否正确！');
            }
        }
    }
}
</script>
<style lang='stylus' scoped>
// 通用样式更改
ul
    padding 0
li
    list-style none
    border 1px solid #eae9e9
    padding 20px

// 评论区样式
.review
    padding 20px
    >div:first-child
        font-size 24px
        img
            vertical-align middle
            margin-right 12px

// 上传评论区
.upViews
    // button居右
    text-align right
    border 1px solid #eae9e9
    padding 20px
    .topNav
        display flex
        input
            outline none
            border none
            border-bottom 1px dashed gray
            padding 8px
            flex 1
            &:focus
                border-bottom 1px dashed red
    #textarea-rows
        margin 3px
        padding 12px 24px
        border none
        outline none
        &:focus
            border none 
    >input
        padding 8px 16px
        outline none
        background-color $base_button_bgc
        border none
        border-radius 12px
        color #fff
        cursor pointer

.MesNav
    display flex
    justify-content space-between
    align-items center
    .vinfo
        display flex
        img
            border-radius 50%
            margin-right 20px
            transition .3s
            &:hover
                transform rotate(180deg)
        div>span:last-child
            font-size 12px

.content
    width 100%
    min-height 100px
    margin-top 38px
    font-size 14px
    text-indent 28px
</style>